<template>
  <div>
    <div class="header_con">
      <div class="header">
        <div class="welcome fl">欢迎来到美多商城!</div>
        <div class="fr">
          <div class="login_info fl">
            欢迎您：<em>张 山</em>
          </div>
          <div class="login_btn fl">
            <a href="login.html">登录</a>
            <span>|</span>
            <a href="register.html">注册</a>
          </div>
          <div class="user_link fl">
            <span>|</span>
            <a href="/user/center/">用户中心</a>
            <span>|</span>
            <a href="/carts/">我的购物车</a>
            <span>|</span>
            <a href="/user/center/order/">我的订单</a>
          </div>
        </div>
      </div>
    </div>

    <div class="search_bar clearfix">
      <a href="index.html" class="logo fl"><img src="/static/images/logo.png"></a>
      <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
      <div class="search_con fr mt40">
        <input type="text" class="input_text fl" name="" placeholder="搜索商品">
        <input type="button" class="input_btn fr" name="" value="搜索">
      </div>
    </div>

    <div class="main_con clearfix">
      <div class="left_menu_con clearfix">
        <h3>用户中心</h3>
        <ul>
          <li><a href="/user/center/">· 个人信息</a></li>
          <li><a href="/user/center/order/">· 全部订单</a></li>
          <li><a href="/user/center/site/">· 收货地址</a></li>
          <li><a href="user_center_pass.html">· 修改密码</a></li>
        </ul>
      </div>

      <div class="right_content clearfix">
        <h3 class="common_title2">全部订单</h3>
        <template v-for="order in orders">
          <ul class="order_list_th w978 clearfix">
            <li class="col01">{{order.create_time}}</li>
            <li class="col02">订单号：{{order.order_id}}</li>
          </ul>
          <table class="order_list_table w980">
            <tbody>
            <tr>
              <td width="55%">
                <ul v-for="order_good in order.order_goods" class="order_goods_list clearfix">
                  <li class="col01"><img :src="order_good.sku.default_image_url"></li>
                  <li class="col02" :title="order_good.sku.name">{{order_good.sku.name|limit}}</li>
                  <li class="col03">{{order_good.count}}</li>
                  <li class="col04">{{order_good.count*order_good.price}}元</li>
                </ul>
              </td>
              <td width="15%">{{order.total_amount}}元</td>
              <td width="15%">{{order.pay_method==2?'支付宝':'货到付款'}}</td>
              <td width="15%"><a @click="oper_btn_click(order.order_id, order.status)" class="oper_btn">{{get_status(order.status)}}</a>
              </td>
            </tr>
            </tbody>
          </table>
        </template>

      </div>
    </div>


    <div class="footer">
      <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
      </div>
      <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
      <p>电话：010-****888 京ICP备*******8号</p>
    </div>

  </div>
</template>

<script>
  export default {
    name: "UserCentrOrder",
    data() {
      return {
        host: host,
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token,
        username: sessionStorage.username || localStorage.username,
        orders: []
      }
    },
    mounted() {
      this.get_order_info()
    },
    methods: {
      get_status(status) {
        // (1, "待支付"),(2, "待发货"),(3, "待收货"),(4, "待评价"),(5, "已完成"),(6, "已取消"),
        var status_act = {
          1: "去支付",
          2: "催发货",
          3: "待收货",
          4: "去评价",
          5: "已完成",
          6: "已取消"
        }
        return status_act[status]
      },
      get_order_info() {
        debugger
        var params = {user: this.user_id}
        this.axios.get(
          'http://127.0.0.1:8000/order_info/',
          {
            params,
            responseType: 'json',
            headers: {
              'Authorization': 'JWT ' + this.token
            }
          }
        ).then(res => {
          this.orders = res.data.results
          this.orders.map(order => {
            order
          })
        })
      },
      oper_btn_click(order_id, status) {
        if (status == '1') {
          // 待支付
          this.axios.get(this.host + '/payment/', {
            params: {order_id},
            responseType: 'json',
            headers: {
              'Authorization': 'JWT ' + this.token
            }
          }).then(response => {
            if (response.data.code == '0') {
              location.href = response.data.alipay_url;
            } else {
              console.log(response.data);
              alert(response.data.errmsg);
            }
          }).catch(error => {
            console.log(error.response);
          });
        } else if (status == '4') {
          // 待评价
          location.href = '/order/judge/?order_id=' + order_id;
        } else {
          // 其他：待收货。。。
          // location.href = '/';
        }
      },
    },
    filters: {
      limit(value) {
        if (value.length > 35) {
          return value.slice(0, 35) + '...'
        } else {
          return value
        }
      }
    }
  }
</script>

<style scoped>

</style>
